<template>
    <div class="container">

        <div class="log-header">
            <div class="logo">
                <div class="iconfont icon-xiaomi"></div>
            </div>
            <div class="log-text">小米帐号登录</div>
        </div>

        <div class="form-group">
          <input type="text" class="form-control-a" placeholder="手机号码"><br/>
          <input type="text" class="form-control-b" placeholder="短信验证码"><span>获取验证码</span><br/>
          <button class="btn" >立即登录/注册</button><br/>
          <button class="btn" @click="$router.openPage('/login')">用户名密码登录</button>
        </div>

        
    </div>
</template>

<script>
    export default {
        name:'register'
    }
</script>

<style lang="scss" scoped>
  .container{
      width:100vw;
      height:100vh;
      background:#F5F5F5;                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
      .log-header{
        width:100%;
        .logo{
            width:1.4rem;
            height:1.4rem;
            margin:0 auto;
            font-size: 0.8rem;
            color: #fff;
            margin-top:1rem;
            background:#ff6b00;
            padding:0.3rem 0.3rem;
            box-sizing:border-box;
            border-radius:2px;
        }
        .log-text{
            text-align:center;
            font-size:0.6rem;
            color:#666;
            margin-top:0.5rem
        }
      }
      .form-group{
          width:100vw;
          padding-left:15vw;
          margin-top:0.5rem;
          .form-control-a{
              width:7rem;
              border:none;
              height:1.4rem;
              padding-left:0.2rem;
              background:#F5F5F5;
              font-size:0.4rem;
              border-bottom:1px solid #d3d3d3 ;
              
          }
          .form-control-b{
              border:none;
              width:5rem;
              height:1.4rem;
              padding-left:0.2rem;
              background:#F5F5F5;
              font-size:0.4rem;
              border-bottom:1px solid #d3d3d3 ;

          }
          span{
            display:inline-block;
            line-height:1.45rem;
            width:2rem;
            color:#f90;
            border-bottom:1px solid #d3d3d3 
            
          }
          .btn{
              width:75vw;
              line-height:1rem;
              background:#FF6700;
              border:none;
              margin-top:1rem;
              color:#fff;
              border-radius:4px;
              font-size:0.5rem;
              box-shadow:0px 4px 3px 0px rgba(93, 53, 53, 0.3);
              &:last-child{
                  background:#F5F5F5;
                  color:#333;
                  border:1px solid #d3d3d3;
              }
               &:active{
                   box-shadow:0 0 0 0;
               }
          }
      }
      
  }
</style>